<template>
  <div>
    <VideoCom :isPlay="isPlay" @changePlay="changePlay"></VideoCom>
    <!-- <div>
      <div style="text-align: left;margin: 45px 0 8px;">无参示例：</div>
    </div>
    <TimeLineCanvas></TimeLineCanvas>
    <div style="text-align: left;margin: 45px 0 8px;">指定参数示例：</div> -->
    <TimeLineCanvas ref="time_line" @click="clickCanvas" @change="changeDate" :mark-time="markTime"
      :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" />
    <div style="text-align: left;">
      <input type="button" @click="setTimeRange" value="设置时间区域" />
      <input type="button" @click="setStartMeddleTime" value="设置起点时间" />
      <input type="button" @click="setMarkTime" value="设置区域标签" />
      <input type="button" @click="setIsAutoPlay" value="开启自动播放" />
      <input type="button" @click="stop" value="暂停播放" />
      <input type="button" @click="play" value="开启播放" />
    </div>
    <div style="color: #03A9F4; margin-top: 5px;">{{ msg }}</div>
  </div>
  <div>
    <EchartView :isPlay="isPlay" @changePlay="changePlay"></EchartView>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import EchartView from "./EchartView.vue";
import TimeLineCanvas from "./TimeLine.vue";
import VideoCom from "./VideoCom.vue";

let isPlay = ref(false);

const time_line = ref(null);

// 定义响应式数据
const msg = ref("");
const isAutoPlay = ref(false);
const startMeddleTime = ref("");
const timeRange = ref([]);
const markTime = ref([]);

// 方法定义
const setStartMeddleTime = () => {
  startMeddleTime.value = "2023-02-10 09:01:00";
};

function changePlay (params) {
  isPlay.value = params;
}

const setTimeRange = () => {
  timeRange.value = '2023-02-10'
  startMeddleTime.value = null;
}

const setMarkTime = () => {
  markTime.value = [
    {
      beginTime: "2023-02-10 06:01:00",
      endTime: "2023-02-10 12:02:00",
      bgColor: "#FFCC99",
      text: "活动",
    },
    {
      beginTime: "2023-02-10 15:01:00",
      endTime: "2023-02-10 16:02:00",
      bgColor: "#FF6666",
      text: "故障",
    },
  ];
};
const setIsAutoPlay = () => {
  isAutoPlay.value = true;
};
const stop = () => {
  time_line.value.stop();
};
const play = () => {
  time_line.value.play();
};

const clickCanvas = (date) => {
  console.log(date);
};

const changeDate = (date, status) => {
  console.log("changeDate:" + date, 'status', status);
  msg.value = "选择时间：" + date + "  播放 状 态：" + status;
  if (status === 'play') {
    // this.$emit('play', date);
    isPlay.value = true;
  } else if (status === 'stop') {
    // this.$emit('pause');
    isPlay.value = false;
  }
};

// 生命周期钩子
onBeforeMount(() => {
  let date = "2023-02-06"; // 或者使用 moment(new Date()).format("YYYY-MM-DD");
  timeRange.value = date; // [date + " 00:00:00", date + "  23:59:59"];
  startMeddleTime.value = date + " 00:00:00";
  markTime.value = [
    {
      beginTime: date + " 01:01:00",
      endTime: date + " 02:02:00",
      bgColor: "#CC3333",
      text: "困人",
    },
    {
      beginTime: date + " 08:01:00",
      endTime: date + " 10:02:00",
      bgColor: "#FF9966",
      text: "非法闯入",
    },
    {
      beginTime: date + " 15:01:00",
      endTime: date + " 16:02:00",
      bgColor: "#FF9900",
      text: "故障",
    },
  ];
});

onMounted(() => {
  // 组件挂载后的逻辑（如果需要）
});
</script>

<style></style>
